<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-播放器</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <script src='https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js'></script>
    <link rel="stylesheet" href="css/listen.css">
    <link rel="short icon" href="img/favicon.ico" type="image/x-icon"/>
</head>

<body>
    <div class="wrap">
        <!-- 播放器 -->
        <div class="play-wrap" id="player">
            <!-- 1.搜索区域 -->
            <div class="search-bar">
                <img src="img/ListenU.png" alt="">
                <input type="text" autocomplete="off" v-model="keywords" @keyup.enter="searchMusic">
                <a href="#" @click="searchMusic"></a>
                <!-- autocomplete="off" 不记录输入值，autocomplete默认为on -->
            </div>
            <!-- 2.歌曲交互区域 -->
            <div class="center-con">
                <!-- a.左侧歌曲目录 -->
                <div class="song-wrapper">   
                    <ul class="song-list">
                        <li v-for="item in songArr">
                            <a href="#" @click="playMusic(item.id)"></a>
                            <b>{{item.name}}</b>
                            <span v-show="item.mvid!=0" @click="openMv(item.mvid)"></span>
                        </li>
                    </ul>
                </div>
                <!-- b.中间图片旋转 -->
                <div class="player-con">
                    <img src="images/disc.png" alt="" :class="flag?'roll1':''">
                    <img src="images/player_bar.png" alt="" :class="flag?'move':'leave'">
                    <img :src="albumUrl" alt="" :class="flag?'roll2':''" v-show="opened">
                </div>
                <!-- c.右侧评论查阅 -->
                <div class="comment-wrapper">
                    <h5 class="title">热门留言</h5>
                    <div class="comment-list">
                        <dl v-for="(item,index) in commentArr">
                            <!-- dt放置头像 -->
                            <dt><img :src="avatarUrl[index]" alt=""></dt>
                            <!-- dd放置其他信息(用户名\留言内容) -->
                            <dd class="name">{{item.user.nickname}}</dd>
                            <dd class="detail">{{item.content}}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <!-- 3.底部进度条区域 -->
            <div class="audio-con">
                <audio :src="musicUrl" class="myaudio" controls autoplay loop @play="play" @pause="pause"></audio>
                <!-- 显示控件  自动播放   循环播放 -->
            </div>
            <!-- 4.mv遮罩层 -->
        <div class="video" v-if="showMv">
            <div class="mask" @click="hidMv"></div>
            <video :src="mvId" controls></video>
        </div>
        </div>
    </div>
    <script src="js/listen.js"></script>
</body>

</html>